<template>
  <div class="search-enter">
    <!-- 导航栏 -->
    <div class="search-nav">
      <span
        class="search-nav-item"
        v-if="SearchBooksList.length"
        :class="isLight == 0 ? 'active' : ''"
        @click="isLight = 0"
        >图书</span
      >
      <span
        class="search-nav-item"
        v-if="SearchCoursesList.length"
        :class="isLight == 1 ? 'active' : ''"
        @click="isLight = 1"
        >课程</span
      >
      <span
        class="search-nav-item"
        v-if="SearchArticlesList.length"
        :class="isLight == 2 ? 'active' : ''"
        @click="isLight = 2"
        >观点</span
      >
      <span
        class="search-nav-item"
        v-if="SearchUsersList.length"
        :class="isLight == 3 ? 'active' : ''"
        @click="isLight = 3"
        >用户</span
      >
    </div>
    <!-- 内容 -->
    <div v-if="!loading" class="search-contain">
      <!-- 图书 -->
      <div class="search-book" v-show="isLight == 0">
        <BookItemA
          v-for="b in SearchBooksList"
          :key="b.id"
          :id="b.id"
          :coverKey="b.coverKey"
          :bookName="b.name"
          :bookAuthors="b.authors"
        />
      </div>
      <!-- 课程 -->
      <div class="search-course" v-show="isLight == 1">
        <CourseItem
          v-for="c in SearchCoursesList"
          :key="c.id"
          :id="c.id"
          :coverKey="c.coverKey"
          :title="c.title"
          :salePrice="c.salePrice"
          :teacherAvatarImageKey="c.teacherAvatarImageKey"
          :teacherName="c.teacherName"
          :liveShowStatus="c.liveShowStatus"
        />
      </div>
      <!-- 观点 -->
      <div class="search-article" v-show="isLight == 2">
        <ViewItem
          v-for="a in SearchArticlesList"
          :key="a.id"
          :articlePersonalCategoryName="a.articlePersonalCategoryName"
          :id="a.id"
          :imageKey="a.authorAvatarImageKey"
          :publishDate="a.publishDate"
          :subject="a.subject"
          :tags="a.tags"
          :viewCount="a.viewCount"
          :voteCount="a.voteCount"
          @click.native="$router.push(`/article/${a.id}`)"
        ></ViewItem>
      </div>
      <!-- 用户 -->
      <div class="search-user" v-show="isLight == 3">
        <div class="user-img" v-for="u in SearchUsersList" :key="u.id" @click="$router.push(`/space/${u.id}`)">
          <img
            :src="`https://file.ituring.com.cn/SmallCover/${u.avatarImageKey?u.avatarImageKey:''}`"
            alt=""
          />
          <p class="user-name">{{ u.nickName }}</p>
        </div>
      </div>
    </div>
    <div class="loading" v-if="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import BookItemA from "@/components/BookItem-A.vue";
import CourseItem from "@/components/CourseItem.vue";
import ViewItem from "@/components/ViewItem.vue";
import {
  SearchBooksAPI,
  SearchCoursesAPI,
  SearchArticlesAPI,
  SearchUsersAPI,
} from "../apis";

export default {
  props: ['id'],
  data() {
    return {
      loading: true,
      page: 1,
      // 数据存储
      SearchBooksList: [],
      SearchCoursesList: [],
      SearchArticlesList: [],
      SearchUsersList: [],
      // 记录当前高亮位置状态
      isLight: 0,
    };
  },
  mounted(){
    this.loading = true
    this.getData()
  },
  beforeRouteUpdate(to,from,next){
    next();
    // 如果前面的数据和后面的数据不一致
    if(to.fullPath != from.fullPath){
      // 等待页面渲染完毕
      this.$nextTick(()=>{
        this.getData()
      })
    }
  },
  methods: {
    // 请求图书数据
    async getSearchResultBook() {
      let { data } = await this.$http(SearchBooksAPI(this.id, this.page));
      this.SearchBooksList = data;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 请求课程数据
    async getSearchResultCourse() {
      let { data } = await this.$http(SearchCoursesAPI(this.id, this.page));
      this.SearchCoursesList = data;
    },
    // 请求观点数据
    async getSearchResultArticle() {
      let { data } = await this.$http(SearchArticlesAPI(this.id, this.page));
      this.SearchArticlesList = data;
    },
    // 请求用户数据
    async getSearchResultUser() {
      let { data } = await this.$http(SearchUsersAPI(this.id, this.page));
      this.SearchUsersList = data;
    },
    // 请求数据
    getData(){
      this.getSearchResultBook();
      this.getSearchResultCourse();
      this.getSearchResultArticle();
      this.getSearchResultUser();
    },
  },
  // 组件
  components: {
    BookItemA,
    CourseItem,
    ViewItem,
  },
};
</script>

<style lang="scss" scoped>
.search-enter {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 1999;
  padding-bottom: 50px;
  // 导航栏
  .search-nav {
    padding: 15px 15px 0;
    display: flex;
    border-bottom: 1px solid var(--more-bg-white);
    .search-nav-item {
      padding-bottom: 15px;
      margin-right: 20px;
      color: var(--book-name-font-black);
      font-size: 14px;
      &.active {
        border-bottom: 2px solid var(--theme-blue);
      }
    }
  }
  // 内容
  .search-contain {
    margin-top: 10px;
    padding: 0 15px;
    background-color: #fff;
    .search-book {
      display: flex;
      flex-wrap: wrap;
    }
    .search-user {
      display: flex;
      flex-wrap: wrap;
      .user-img {
        padding: 20px 30px 10px;
        img {
          width: 55px;
          height: 55px;
          border-radius: 55px;
        }
        .user-name {
          color: var(--more-font-grey);
          font-size: 14px;
          line-height: 20px;
          max-width: 55px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>